/* Progress bars */

.ui .progress {
	border: 1px solid $darkgrey;
	background: $progress-bg;
	line-height: 100%;
	display: inline-block;
	position: relative;
	padding: 0;
	padding: 7px 10px;
	height: 48px;
	border: none;
	width: 100% !important;
	box-sizing: border-box;

	&.small {
		width: 200px;
		padding: 4px 5px;
		height: 25px;
	}

	&.big {
		width: 400px;
	}

	&.large {
		width: 400px;
		margin: 0 auto;
		display: block;
	}

	&.large .bar {
	}

	&.small .bar {
		height: 17px;
		line-height: 17px;
		font-size: 13px;
		border-radius: 2px;
	}

	&.large .bar p {
		height: 40px;
		font-size: 20px;
	}

	.bar {
		background-color: $progress-bar-bg;
		height: 34px;
		line-height: 34px;
		font-size: 20px;
		border-radius: 4px;
		border: none;
	}

	.bar p {
		position: absolute;
		text-align: center;
		width: 100%;
		margin: 0;
		text-shadow: 1px 1px 2px $black;
		color: $white;
		line-height: inherit;
		font-size: inherit; 
	}

	.bar.good {
		background-color: $progress-bar-bg-l1;
	}

	.bar.bad {
		background-color: $progress-bar-bg-l2;
	}

	.bar.vbad {
		background-color: $progress-bar-bg-l3;
	}

	.bar.ubad {
		background-color: $progress-bar-bg-l4;
	}

	.bar.vgood {
		background-color: $progress-bar-bg-l5;
	}

	.bar.ugood {
		background-color: $progress-bar-bg-l6;
	}
}
